<template>
  <a-modal title="验收" v-model:visible="visible" :width="600" @ok="handleOk" @cancel="handleCancel"
    :destroyOnClose="true">
    <!-- 基本信息 -->
    <a-form ref="formRef" :model="formData" :rules="rules" class="warehouse-form" :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }">
      <a-form-item label="仓库名称" name="warehouseName">
        <a-input v-model:value="formData.warehouseName" :disabled="true" />
      </a-form-item>
      <a-form-item label="商品名称" name="productName">
        <a-input v-model:value="formData.productName" :disabled="true" />
      </a-form-item>
      <a-form-item label="商品数量" name="totalNum">
        <a-input-number v-model:value="formData.totalNum" :disabled="true" style="width: 100%" />
      </a-form-item>
      <a-form-item label="合格数量" name="qualifiedNum">
        <a-input-number v-model:value="formData.qualifiedNum" :min="0" :max="formData.totalNum" :precision="0"
          @change="handleQualifiedChange" style="width: 100%" />
      </a-form-item>
      <a-form-item label="残次数量" name="defectiveNum">
        <a-input-number v-model:value="formData.defectiveNum" :min="0" :max="formData.totalNum" :precision="0"
          @change="handleDefectiveChange" style="width: 100%" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'CheckDialog',
  emits: ['success'],
  setup(props, { emit }) {
    const visible = ref(false);
    const formData = ref<any>({});
    const formRef = ref();

    // 表单验证规则
    const rules = {
      qualifiedNum: [{ required: true, message: '请输入合格数量' }],
      defectiveNum: [{ required: true, message: '请输入残次数量' }],
    };

    // 处理合格数量变化
    const handleQualifiedChange = (value: number) => {
      if (value === undefined || value === null) return;
      formData.value.defectiveNum = formData.value.totalNum - value;
    };

    // 处理残次数量变化
    const handleDefectiveChange = (value: number) => {
      if (value === undefined || value === null) return;
      formData.value.qualifiedNum = formData.value.totalNum - value;
    };

    // 打开验收
    const openCheck = (row: any) => {
      visible.value = true;
      formData.value = {
        warehouseName: row.warehouseName,
        productName: row.productName,
        totalNum: row.returnNum,
        qualifiedNum: row.returnNum, // 默认全部合格
        defectiveNum: 0,
        checkDescription: '',
      };
    };

    // 确认验收
    const handleOk = async () => {
      try {
        await formRef.value.validate();
        // 验证数量
        const total = (formData.value.qualifiedNum || 0) + (formData.value.defectiveNum || 0);
        if (total !== formData.value.totalNum) {
          message.error('合格数量与残次数量之和必须等于总数量');
          return;
        }


        message.success('验收成功');
        visible.value = false;
        emit('success');
      } catch (error) {
        console.error('验收失败:', error);
      }
    };

    // 取消
    const handleCancel = () => {
      visible.value = false;
      formData.value = {};
    };

    return {
      visible,
      formData,
      formRef,
      rules,
      openCheck,
      handleOk,
      handleCancel,
      handleQualifiedChange,
      handleDefectiveChange,
    };
  },
});
</script>

<style lang="less" scoped>
.warehouse-form {
  padding: 24px 16px;

  :deep(.ant-form-item) {
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
